<template>
  <div v-loading="loading">
    <!-- 搜索结果 -->
    <el-table ref="table"
              row-key="orderId"
              @expand-change="getOrderGoods"
              style="width: 100%;height: 550px;overflow = auto;"
              :data="tableData"
              border="true">
      <template #empty>
        <el-empty v-show="tableData.length == 0"
                  description="空空如也" />
      </template>
      <el-table-column type="expand">
        <template #default="props">
          <div style="width: 92%;margin: auto;height: 100px;"
               border="true"
               v-loading="props.row.orderGoods == null">
            <el-table v-show="props.row.orderGoods != null"
                      :data="props.row.orderGoods"
                      :border="childBorder">
              <el-table-column label="关联ID"
                               prop="ogId" />
              <el-table-column label="商品ID"
                               prop="goodsId" />
              <el-table-column label="商品数量"
                               prop="ogNum" />
              <el-table-column label="总价"
                               prop="ogPrice" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="orderId"
                       label="ID"></el-table-column>
      <el-table-column align="center"
                       prop="orderOutId"
                       label="订单编号"></el-table-column>
      <el-table-column align="center"
                       prop="userId"
                       label="用户ID"></el-table-column>
      <el-table-column align="center"
                       prop="orderPrice"
                       label="总价"></el-table-column>
      <el-table-column align="center"
                       prop="orderPay"
                       label="支付状态"></el-table-column>
      <el-table-column align="center"
                       prop="orderStatu"
                       label="发货状态"></el-table-column>
      <el-table-column align="center">
        <template #header>
          <div style="display: flex;align-items: center;justify-content: center;">
            <!-- 刷新 -->
            <el-icon class="pointer"
                     style="font-size: 28px;margin-left: 10px;"
                     @click="getOrders">
              <Refresh color="#79bbff" />
            </el-icon>
          </div>
        </template>
        <template #default="scope">
          <el-icon @click="updateToPay(scope.$index)"
                   style="font-size: 24px;margin-right: 20px;">
            <Edit class="pointer"
                  color="#79bbff" />
          </el-icon>
          <el-icon @click="delOrder(scope.$index)"
                   style="font-size: 24px;">
            <Delete class="pointer"
                    color="#f56c6c" />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ArrowLeft,
  ArrowRight,
  Refresh,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
export default {
  props: ['admin'],
  components: {
    ArrowLeft,
    ArrowRight,
    Refresh,
    Delete,
    Edit,
  },
  data() {
    return {
      theExpandRow: 0,
      formatTime: (value) => {
        if (value) {
          value = new Date(value)
          return (
            value.getFullYear() +
            '-' +
            (value.getMonth() + 1 > 9 ? '' : '0') +
            (value.getMonth() + 1) +
            '-' +
            (value.getDate() > 9 ? '' : '0') +
            value.getDate() +
            ' ' +
            (value.getHours() > 9 ? '' : '0') +
            value.getHours() +
            ':' +
            (value.getMinutes() > 9 ? '' : '0') +
            value.getMinutes() +
            ':' +
            (value.getSeconds() > 9 ? '' : '0') +
            value.getSeconds() +
            ''
          )
        } else {
          return ''
        }
      },
      tableData: [
        {
          orderId: 27,
          orderTime: '2023-06-12T11:43:41.000+00:00',
          orderStatu: 0,
          orderPay: 0,
          orderPrice: 4.567867904e9,
          userId: 1,
          orderOutId: '2023061219434053192500001',
          orderGoods: null,
        },
        {
          orderId: 28,
          orderTime: '2023-06-12T11:43:41.000+00:00',
          orderStatu: 0,
          orderPay: 0,
          orderPrice: 4.567867904e9,
          userId: 1,
          orderOutId: '2023061219434053192500001',
          orderGoods: null,
        },
      ],
      loading: false, // 加载弹窗
    }
  },
  created() {
    this.getOrders()
  },
  methods: {
    getOrderGoods(row, expandedRows) {
      if (row.orderGoods == null) {
        request
          .get('/api/orders/getAllOrdersDes?id=' + row.orderId)
          .then((res) => {
            row.orderGoods = res
          })
      }
    },
    getOrders() {
      this.loading = true
      // this.$refs.table.setScrollTop(0)
      request.get('/api/orders/getAllOrders').then((res) => {
        this.loading = false
        console.log(res)
        // for (let i = 0; i < res.length; i++) res[i].orderGoods = null
        this.tableData = res
      })
    },
    updateToPay(index) {
      this.loading = true
      request
        .post('/api/orders/updateOrderPayStatus', {
          orderId: this.tableData[index].orderId,
        })
        .then((res) => {
          this.loading = false
          ElMessage({
            message: '支付状态修改成功',
            type: 'success',
            duration: 2000,
          })
        })
    },
    delOder(index) {
      this.loading = true
      request
        .post('/api/orders/delOrder', {
          orderId: this.tableData[index].orderId,
        })
        .then((res) => {
          this.loading = false
          this.tableData.splice(index, 1)
          ElMessage({
            message: '删除成功',
            type: 'success',
            duration: 2000,
          })
        })
    },
  },
}
</script>
<style scoped>
.pointer:hover {
  cursor: pointer;
}
</style>
  